<script setup>
import { ref, onMounted, nextTick } from 'vue'

const props = defineProps({
  placeholder: {
    type: String,
    default: '输入内容',
  },
  onChange: Function,
  modelValue: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])
const content = ref('')
onMounted(() => {
  nextTick(() => {
    if(props.modelValue) {
      content.value = props.modelValue
    }
  })
})
// const handleChange = (e) => {
//   emit('update:modelValue', e.target.value)
// }
</script>

<template>
  <textarea
    v-model="content"
    @change="onChange"
    name=""
    id=""
    class="w-full border-1 border-slate-200 rounded-md p-3 h-[300px] max-h-[600px]"
    :placeholder="placeholder"></textarea>
</template>

<style scoped lang="scss"></style>
